<template>
    <el-main>
        <el-container class="home-container">
            <el-header>
                <div>
                    <img src='../assets/logo.png' height="30px;">
					<span>权限后台管理系统</span>
                </div>
				<el-dropdown @command="handleCommand">
				  <span class="el-dropdown-link">
				    <img src='../assets/logo.png' height="30px;">{{this.$store.state.userInfo.name}}
				  </span>
				  <el-dropdown-menu slot="dropdown">
				    <el-dropdown-item command="loginOut">退出</el-dropdown-item>
				  </el-dropdown-menu>
				</el-dropdown>
            </el-header>
            <el-container>
                <el-aside :style="'margin-top: 10px;width: '+(isCollapse?100:200)+'px;'" >
					<el-menu router default-active="1-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
					  <div @click="isCollapse=true" v-if="!isCollapse">
						<i class="el-icon-s-fold">收起</i>
					  </div>
                      <div @click="isCollapse=false" v-if="isCollapse">
						<i class="el-icon-s-unfold">展开</i>
					  </div>
					  <el-submenu :index="'index-'+index" v-for="(menu,index) in menuList">
					    <template slot="title">
					      <i :class="menu.iconCls"></i>
					      <span slot="title">{{menu.name}}</span>
					    </template>
					    <el-menu-item-group>
					      <el-menu-item :index="subMenu.path" v-for="subMenu in menu.subMenus"><i :class="subMenu.iconCls"></i>{{subMenu.name}}</el-menu-item>
					    </el-menu-item-group>
					  </el-submenu>
					</el-menu>
                </el-aside>
                <el-container>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                    <el-footer><img src='../assets/logo.png' height="30px;"></el-footer>
                </el-container>
            </el-container>
        </el-container>
    </el-main>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                isCollapse: true,
				menuList:[],
				width:200
            }
        },
        methods: {
		  handleOpen(key, keyPath) {
			console.log(key, keyPath);
		  },
		  handleClose(key, keyPath) {
			console.log(key, keyPath);
		  },
		  //导航退出
		  handleCommand(command) {
			this.$message('click on item ' + command);
			this.$router.replace("/");
		  }
        },
		created(){
			//打印路由信息
			let r = this.$router.options.routes;
			console.log(r);
			//加载菜单数据
			let username = localStorage.getItem("username");
			this.axios.get(this.$baseUrl+"permission/menu/getMenuVoListByUsername",{params:{username:username}}).then(res=>{
				this.menuList = res.data.data;
			})
			
		}
    }
</script>

<style scoped>
    .home-container {
        height: 100%;
		width: 100%;
		background-color: #fff;
    }

	.el-header {
		background-color: #252733;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 24px;
	}
	.el-header div {
		display: flex;
		align-items: center;
	}

	.el-header .el-menu {
		align-items: flex-end;
	}

	.el-aside {
		background-color: #fff;
	}

	.el-menu-item {
		padding-top: inherit;
	}
	.el-dropdown span {
		display: flex;
		align-items: center;
	}
</style>
